<template>
	<view class="detail">
		<view v-if="loadState">
			<view class="title">{{row.title}}</view>
				<view class="info">
					<text>{{row.author}}</text>
					<uni-dateformat
					:date="row.postTime"
					:threshold = "[60000, 3600000]"
					format="yyyy/MM/dd hh:mm:ss"
					>
					</uni-dateformat>
				</view>
				<view class="content">
					{{row.content}}
				</view>
				<view class="btnGroup">
					<button size="mini" type="warn" @click="OnRemove()">删除</button>
					<button size="mini" @click="goToEdit()">修改</button>
				</view>
		</view>
		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
		</view>
</template>

<script>
	let id ;
	export default {
		data() {
			return {
				row:{},
				loadState:false
			};
		},
		onLoad(e) {
			id = e.id;
			this.getDetailId(id)
			// console.log(id)
		},
		methods:{
			// 跳转编辑页面
			goToEdit(){
				uni.navigateTo({
					url:"/pages/edit/edit?id="+id
				})
			},
			OnRemove(){
				uni.showModal({
					content:"确定删除这条数据吗？",
					success: (res) => {
						console.log(res)
						if(res.confirm){
							this.funcRemove();
						}
					}
				})
			},
			// 删除一条数据
			funcRemove(){
				uniCloud.callFunction({
					name:"art_remove_row",
					data:{
						id
					}
				}).then(()=>{
					uni.showToast({
						icon:"success",
						title:"删除成功"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/index/index"
						})
					},800)
				})
			},
			getDetailId(id){
				uniCloud.callFunction({
					name:"art_get_row",
					data:{
						id
					}
				}).then(res=>{
					this.row = res.result.data[0];
					this.loadState=true;
					uni.setNavigationBarTitle({ // 设置导航条标题
						title:this.row.title
					})
					console.log(this.row)
				}).catch(()=>{
					uni.showToast({
						icon:"error",
						title:"删除有误"
					})
					// 追加定时器
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/index/index"
							})
					},800)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail{
	padding: 30rpx;
	.title{
		font-size: 50rpx;
		color: #000;
		text-align: justify;
		line-height: 1.4em;
	}
	.info{
		font-size: 30rpx;
		color: #666;
		padding: 30rpx 0 60rpx;
		text{
			padding-right: 30rpx;
		}
	}
	.content{
		font-size: 30rpx;
		line-height: 1.4em;
	}
	.btnGroup{
		padding: 50rpx 0;
		button{
			margin-right: 30rpx;
		}
	}
}
</style>
